<template>
  <div class="view-main">
    <div class="view-header">
      <el-radio-group v-model="timeSelect" @change="queryTimeChanged">
        <el-radio-button label="全部"></el-radio-button>
        <el-radio-button label="今日"></el-radio-button>
        <el-radio-button label="本周"></el-radio-button>
        <el-radio-button label="本月"></el-radio-button>
        <el-radio-button label="自定义"></el-radio-button>
      </el-radio-group>
      <el-date-picker v-if="timeShow" v-model="timeRange" type="datetimerange" format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                      align="right" @change="handleTimeRangeChanged">
      </el-date-picker>
      <el-input placeholder="用户账号" v-model="queryParam.username" style="width: 200px" clearable @clear="getDataList()"></el-input>
      <span>
        <el-button type="primary" @click="getDataList" icon="el-icon-search">查询</el-button>
        <el-dropdown split-button type="primary" placement="bottom" @click="exportLog" style="margin-left: 8px">
          导出
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>导出并删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </span>
    </div>
    <div class="view-body">
      <div class="light-table">
        <el-table :data="tableData" height="300" highlight-current-row style="width: 100%">
          <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
          <el-table-column property="username" label="用户账号" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column property="ip" label="登陆IP" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column property="logTime" label="操作时间" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column property="module" label="模块" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column property="logContent" label="描述" align="center" width="180"></el-table-column>
        </el-table>
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100]" :total="total" :current-page="pageNum" :page-size.sync="pageSize" :page-count="pages" @current-change="handlePageChange" @size-change="handleSizeChange"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { isEmpty, formatDate, getStartTimeOfDate, getEndTimeOfDate, getStartTimeOfWeek, getEndTimeOfWeek, getStartTimeOfMonth, getEndTimeOfMonth } from '../../utils/util'
import { getAction, downloadAction } from '@/utils/manage'

export default {
  name: 'SysLog',
  data() {
    return {
      timeSelect: '今日',
      queryParam: {
        username: '',
        startLogTime: '',
        endLogTime: ''
      },
      timeRange: [],
      timeShow: false,
      tableData: {},
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      pages: 0,
      total: 0,
      url: {
        pageLog: '/sys/log',
        export: '/sys/log/export'
      }
    }
  },
  created() {
    this.queryTimeChanged(this.timeSelect)
    this.getDataList()
  },
  methods: {
    queryTimeChanged(text) {
      let now = new Date()
      switch (text) {
        case '今日':
          this.timeShow = false
          var startTime = getStartTimeOfDate(now)
          var endTime = getEndTimeOfDate(now)
          // console.log('startTime=', startTime)
          this.queryParam.startLogTime = formatDate(startTime, 'yyyy-MM-dd hh:mm:ss')
          this.queryParam.endLogTime = formatDate(endTime, 'yyyy-MM-dd hh:mm:ss')
          break
        case '本周':
          this.timeShow = false
          var startTime = getStartTimeOfWeek(now)
          var endTime = getEndTimeOfWeek(now)
          this.queryParam.startLogTime = formatDate(startTime, 'yyyy-MM-dd hh:mm:ss')
          this.queryParam.endLogTime = formatDate(endTime, 'yyyy-MM-dd hh:mm:ss')
          break
        case '本月':
          this.timeShow = false
          var startTime = getStartTimeOfMonth(now)
          var endTime = getEndTimeOfMonth(now)
          this.queryParam.startLogTime = formatDate(startTime, 'yyyy-MM-dd hh:mm:ss')
          this.queryParam.endLogTime = formatDate(endTime, 'yyyy-MM-dd hh:mm:ss')
          break
        case '自定义':
          this.timeShow = true
          this.queryParam.startLogTime = ''
          this.queryParam.endLogTime = ''
          break
        default:
          this.timeShow = false
          this.queryParam.startLogTime = ''
          this.queryParam.endLogTime = ''
          break
      }
    },
    handleTimeRangeChanged(text) {
      this.queryParam.startLogTime = text[0]
      this.queryParam.endLogTime = text[1]
    },
    searchReset() {
      this.queryParam = { time: '今日', timeRange: {} }
    },
    getDataList() {
      let params = { _pageSize: this.pageSize, _pageNum: this.pageNum, ...this.queryParam }
      this.$http.get(this.url.pageLog, {params}).then(data => {
        let result = data.result
        this.tableData = result.records
        this.pageNum = result.current
        this.pageSize = result.size
        this.pages = result.pages
        this.total = result.total
      })
    },
    handlePageChange(page) {
      this.pageNum = page
      this.getDataList()
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.getDataList()
    },
    exportLog() {
      let params = { ...this.queryParam }
      downloadAction(this.url.export, params).then(res => {
        console.log('res=', res)
        let blob = new Blob([res], { type: 'application/vnd.ms-excel' })
        let url = URL.createObjectURL(blob)
        let filename = '系统日志'
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', filename + '.xlsx')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    }
  }
}
</script>

<style lang="less" scoped>
    .view-header{
        margin-top: 20px;
    }
    .dialog-footer{
        margin-right: 47px;
    }
</style>
